<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no,viewport-fit=cover" />
		<title>耘园全景</title>
		<link href="plan/css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/hui.css" />
		<link rel="stylesheet" type="text/css" href="css/my.css" />
		<style>
			.hui-wrap {
			  width: 100%;
			  height: 100vh;
			  display: flex;
			  flex-direction: column;
			  background: #21202d;
			  /*ECharts容器*/
			}
			.hui-wrap .info_nav {
			  height: 50px;
			  max-height: 50px;
			  background: #464646;
			  display: flex;
			  flex-wrap: nowrap;
			}
			.hui-wrap .info_nav #hui-back,
			.hui-wrap .info_nav .data_Contrast {
			  width: 15%;
			  line-height: 50px;
			  text-align: center;
			  font-size: 1.2rem;
			  color: #fff;
			}
			.hui-wrap .info_nav .base_name {
			  width: 70%;
			  line-height: 50px;
			  text-align: center;
			  color: #fff;
			}
			.krpano{
				width: 100%;
				height: calc(100% - 72px);
				
			}
		</style>
	</head>

	<body>
		<!-- <div style="height: 22px;width: 100%;background: #464646;position: fixed;top: 0;"></div>
		<header class="hui-header" style="top: 0px;height: 50px; max-height: 50px; background: #464646;">
			<div id="hui-back" style="line-height: 50px;"></div>
			<h1 style="line-height: 50px;">耘园全景</h1>
			<div id="hui-right" style="line-height: 50px;"></div>
		</header> -->
		<div class="hui-wrap" id="datas">
			<div style="height: 22px;background: #464646;"></div>
			<!--top部分-->
			<div class="info_nav">
				<div id="hui-back"></div>
				<h2 class="base_name title-txt">耘园全景</h2>
				<!-- <div class="data_Contrast" onclick="data_DB();">对比</div> -->
			</div>
			<div class="krpano"></div>
			<!-- <iframe src="http://yunyuan.cysc.sureserve.cn/we_map.jhtml?method=perception_subpage&type=yunyuan_pano" name="pano" scrolling="auto" sandbox="allow-same-origin"></iframe> -->
		</div>
		
		<script type="text/javascript" src="js/func/hui.js" charset="UTF-8"></script>
		<script src="plan/js/mui.js"></script>
		<script type="text/javascript" src="js/func/vue.min.js" charset="UTF-8"></script>
		<script src="js/func/jq.js" type="text/javascript" charset="utf-8"></script>
		<script src="http://yunyuan.cysc.sureserve.cn/static/pano/js/tour.js"></script>
		<script>
			mui.init({
				subpages: [{
					url: 'http://yunyuan.cysc.sureserve.cn/we_map.jhtml?method=perception_subpage&type=yunyuan_pano',
					id: 'yunyuan_pano.html',
					styles: {
						top: '72px',
						bottom: '0px',
					}
				}]
			})
				var krPanoHtml = '<div id="pano" style="width:100%;height:100%;">'+
									'<noscript>'+
										'<table style="width:100%;height:100%;">'+
											'<tr style="vertical-align:middle;">'+
												'<td>'+
													'<div style="text-align:center;">ERROR:<br /><br />Javascript not activated<br /><br /></div>'+
												'</td>'+
											'</tr>'+
										'</table>'+
									'</noscript>'+
								'</div>' +
								/* '<div style="position: absolute; top: 40px; right: 20px; z-index: 3021; overflow: visible; opacity: 1; background: none; cursor: default; pointer-events: none; border-style: solid; border-color: rgb(0, 0, 0); border-width: 0px; border-radius: 0px; width: 32px; height: 160px; ">' +
									'<div onclick="screen();" style="position: absolute; z-index: 3001; overflow: visible; opacity: 1; cursor: pointer; pointer-events: auto; background-image: url(&quot;https://s.expoon.com/cache/201907101844/image/z/krpano/images/pano-icon.png&quot;); width: 32px; height: 32px; background-position: -192px -160px; background-size: 256px 448px; transform: translateZ(1e+12px) translate(0px, 0px) translate(0px, -16px) rotate(0deg) translate(0px, 16px);"></div>' +
									//'<div onclick="Playsensor();" style="position: absolute; z-index: 3001; overflow: visible; opacity: 1; cursor: pointer; pointer-events: auto; background-image: url(&quot;http://yunyuan.cysc.sureserve.cn/static/pano/skin/02.png&quot;); background-color:rgba(0,0,0,.4); width: 32px; height: 32px; background-repeat: no-repeat; border-radius: 50%; background-position: 3px 4px; background-size: 24px 24px; transform: translateZ(1e+12px) translate(0px, 40px) translate(0px, -16px) rotate(0deg) translate(0px, 16px);"></div>' +
									'<div onclick="Playvideo();" style="position: absolute; z-index: 3003; overflow: visible; opacity: 1; cursor: pointer; pointer-events: auto; background-image: url(&quot;http://yunyuan.cysc.sureserve.cn/static/pano/skin/01.png&quot;); background-color:rgba(0,0,0,.4); width: 32px; height: 32px; background-repeat: no-repeat; border-radius: 50%; background-position: 4px 3px; background-size: 24px 24px; transform: translateZ(1e+12px) translate(0px, 40px) translate(0px, -16px) rotate(0deg) translate(0px, 16px);"></div>' +
									//'<div onclick="thumbnail();" style="position: absolute; z-index: 3001; overflow: visible; opacity: 1; cursor: pointer; pointer-events: auto; background-image: url(&quot;https://s.expoon.com/cache/201907101844/image/z/krpano/images/pano-icon.png&quot;); width: 32px; height: 32px; background-position: 0px -64px; background-size: 256px 448px; transform: translateZ(1e+12px) translate(0px, 120px) translate(0px, -16px) rotate(0deg) translate(0px, 16px);"></div>' +
								'</div>' + */
								'<div onclick="thumbnail();" style="position: absolute; bottom: 10px; z-index: 3001; overflow: visible; opacity: 1; cursor: default; pointer-events: none; background: none; border-style: solid; border-color: rgb(0, 0, 0); border-width: 0px; border-radius: 0px; width: 70px; height: 70px; ">' +
									'<div style="position: absolute; z-index: 3001; overflow: visible; opacity: 1; cursor: pointer; pointer-events: auto; background-image: url(&quot;https://s.expoon.com/cache/201907101844/image/z/krpano/images/pano-icon.png&quot;); width: 40px; height: 40px; background-position: 0px 0px; background-size: 320px 560px; transform: translateZ(1e+12px) translate(15px, 0px) translate(0px, -20px) rotate(0deg) translate(0px, 20px);">' +
									'</div>' +
									'<div style="position: absolute; z-index: 3001; overflow: visible; opacity: 1; cursor: default; pointer-events: auto; color: rgb(0, 0, 0); text-size-adjust: none; background: none; width: 52px; height: 20px; transform: translateZ(1e+12px) translate(9px, 45px) translate(0px, 10px) rotate(0deg) translate(0px, -10px);">' +
										'<div style="position: absolute; top: 0px; left: 0px; transform-origin: 0px 0px; transform: scale(1); width: 100%; height: 100%; font-size: 12px; font-family: Arial; line-height: normal; color: rgb(0, 0, 0); pointer-events: none; visibility: visible;">' +
											'<div style="position: absolute; white-space: nowrap; text-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;">' +
												'<div style="margin:2px 2px 2px 2px;color:#ffffff;font-size:12px;">场景选择</div>' +
											'</div>' +
										'</div>' +
									'</div>' +
									'<div style="position: absolute; z-index: 3003; overflow: visible; opacity: 1; cursor: pointer; pointer-events: auto; background-image: url(&quot;https://s.expoon.com/cache/201907101844/image/z/krpano/images/transparent.png&quot;); width: 70px; height: 70px; background-position: 0px 0px; background-size: 70px 70px; transform: translateZ(1e+12px) translate(0px, 0px) translate(-35px, -35px) rotate(0deg) translate(35px, 35px);">' +
									'</div>' +
								'</div>' +
								
								'<div onclick="autorotate();" style="position: absolute; bottom: 10px; right: 15px; z-index: 3021; overflow: hidden; opacity: 1; background: none; cursor: default; pointer-events: none; border-style: solid; border-color: rgb(0, 0, 0); border-width: 0px; border-radius: 0px; width: 70px; height: 70px;">' +
									'<div style="position: absolute; z-index: 3001; overflow: visible; opacity: 1; cursor: default; pointer-events: none; background: none; border-style: solid; border-color: rgb(0, 0, 0); border-width: 0px; border-radius: 0px; width: 70px; height: 70px; transform: translateZ(1e+12px) translate(0px, 0px) translate(35px, 0px) rotate(0deg) translate(-35px, 0px);">' +
										'<div style="position: absolute; z-index: 3001; overflow: visible; opacity: 1; cursor: pointer; pointer-events: auto; background-image: url(&quot;https://s.expoon.com/cache/201907101844/image/z/krpano/images/pano-icon.png&quot;); width: 40px; height: 40px; background-position: -40px -40px; background-size: 320px 560px; transform: translateZ(1e+12px) translate(15px, 0px) translate(0px, -20px) rotate(0deg) translate(0px, 20px);"></div>' +
										'<div style="position: absolute; z-index: 3001; overflow: visible; opacity: 1; cursor: default; pointer-events: auto; color: rgb(0, 0, 0); text-size-adjust: none; background: none; width: 52px; height: 20px; transform: translateZ(1e+12px) translate(9px, 45px) translate(0px, 10px) rotate(0deg) translate(0px, -10px);">' +
											'<div style="position: absolute; top: 0px; left: 0px; transform-origin: 0px 0px; transform: scale(1); width: 100%; height: 100%; font-size: 12px; font-family: Arial; line-height: normal; color: rgb(0, 0, 0); pointer-events: none; visibility: visible;">' +
												'<div style="position: absolute; white-space: nowrap; text-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;">' +
													'<div style="margin:2px 2px 2px 2px;color:#ffffff;font-size:12px;">自动旋转</div>' +
												'</div>' +
											'</div>' +
										'</div>' +
										'<div style="position: absolute; z-index: 3003; overflow: visible; opacity: 1; cursor: pointer; pointer-events: auto; background-image: url(&quot;https://s.expoon.com/cache/201907101844/image/z/krpano/images/transparent.png&quot;); width: 70px; height: 70px; background-position: 0px 0px; background-size: 70px 70px; transform: translateZ(1e+12px) translate(0px, 0px) translate(-35px, -35px) rotate(0deg) translate(35px, 35px);"></div>' +
									'</div>' +
								'</div>';
				/* $(".krpano").html(krPanoHtml);
				$(".krpano").css({'position':'relative',})
				alert(111);
				let ActionURL = 'http://yunyuan.cysc.sureserve.cn/static/pano/plugins/action.js';
				$.getScript(ActionURL, function() {
					initKrpano();
				}); */
				
				function initKrpano(){
					var config = {
						swf:"http://yunyuan.cysc.sureserve.cn/static/pano/js/tour.swf", 
						xml:"http://yunyuan.cysc.sureserve.cn/static/pano/js/tour.xml", 
						target:"pano", 
						html5:"auto", 
						mobilescale:1.0, 
						initvars:{"basePath":"http://yunyuan.cysc.sureserve.cn/static/pano/","SWFPATH":"http://yunyuan.cysc.sureserve.cn/static/pano/","photoPath":"http://yunyuan.cysc.sureserve.cn/panos/yunyuan_panos/"},
						passQueryParameters:true, 
						onready: krpano_onready_callback
					};
					embedpano(config);
				}
				function krpano_onready_callback(krpano_interface) {
					krpano = krpano_interface;
					console.log(krpano)
				}

			var datas = new Vue({
				el: '#datas',
				data: {
					
				},
				methods: {

				}
			});

			
		</script>

	</body>

</html>